<template>
  <div>
    <ul class="Ord-list">
      <li v-for="(item) in list" :key="item.id">
        <span>
          <input type="checkbox" :checked="valbox" />
        </span>
        <span>{{item.name}}</span>
        <span>{{item.nickname}}</span>
        <span>{{item.phone}}</span>
        <span>{{item.Registration}}</span>
        <span>{{item.level}}</span>
        <span>{{item.time}}</span>
        <span>
          <el-switch v-model="item.account" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </span>
        <span>
          <router-link to="/UserDetails" class="rot">{{item.operation[0]}}</router-link>
          <p>
            <el-button
              style="padding:0;color:#9137f3;font-size:12px;font-weight:400;"
              type="text"
              @click="open"
            >{{item.operation[1]}}</el-button>
          </p>
        </span>
      </li>
    </ul>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>取消订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["bbb"],
  computed: {
    valbox: function () {
      return this.bbb;
    },
  },
  data() {
    return {
      dialogVisible: false,
      list: [
        {
          id: 1,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 2,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 3,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 4,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 5,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 6,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 7,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 8,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 9,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
        {
          id: 10,
          choice: "",
          name: "20182036",
          nickname: "爱吃阿司匹林的喵",
          phone: "18854138769",
          Registration: "2019-01-25 10:55",
          level: "3",
          time: "2019-01-25 10:55",
          account: true,
          operation: ["编辑", "删除"],
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    open() {
      this.$confirm("删除后无法恢复，确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
  },
};
</script>
<style scoped>
.Ord-list {
  border-width: 0px;
  position: relative;
  left: 50px;
  top: 50px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
.Ord-list li {
  display: block;
  position: relative;
  left: 0px;
  top: 0px;
  width: 1000px;
  height: 90px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(173 162 162);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.Ord-list li span {
  position: relative;
  top: 30px;
  display: block;
  float: left;
  text-align: center;
  width: 100px;
  height: 90px;
  box-shadow: none;
  font-size: 12px;
}
.Ord-list li span:nth-child(1) {
  width: 80px;
}
.Ord-list li span:nth-child(3) {
  width: 140px;
}
.Ord-list li span:nth-child(4) {
  width: 150px;
}
.Ord-list li span:nth-child(5) {
  width: 110px;
}
.Ord-list li span:nth-child(6) {
  width: 110px;
}
.Ord-list li span:nth-child(8) {
  width: 100px;
}
.Ord-list li span:nth-child(9) {
  width: 110px;
}
.Ord-list li span:nth-child(10) {
  width: 140px;
  color: #9137f3;
}
.rot {
  float: left;
  color: #9137f3;
  text-decoration: none;
}
</style>